<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="__PUBLIC__/extjs_4.2/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="__PUBLIC__/extjs_4.2/ext-all.js" type="text/javascript"></script>
<script src="__PUBLIC__/extjs_4.2/ext-lang-zh_CN.js" type="text/javascript"></script>

</head>
<body>

<div id="grid"></div>

<script type="text/javascript">  
//表格数据最起码有列、数据、转换原始数据这3项  
//Ext.onReady(function(){  
    //定义列  
    var columns = [  
        {header:'编号',dataIndex:'id',width:50}, //sortable:true 可设置是否为该列进行排序  
        {header:'用户名',dataIndex:'account'},  
        {header:'真实姓名',dataIndex:'name'},
        {header:'email',dataIndex:'email'}, 
        {header:'最近登录时间',dataIndex:'last_time',width:160}, 
        {header:'最近登录IP',dataIndex:'last_ip',width:160}, 
        {header:'登录次数',dataIndex:'login_times',width:80}, 
        {header:'状态',dataIndex:'status',width:80,renderer:function(val){
        	if (val==1)
        		return "<span style='color:green;'>启用</span>";
        	else
        		return "<span style='color:red;'>禁用</span>";	
        	
        }}, 
        /**
        {header:'状态',dataIndex:'status',width:120,renderer:function(value){  
            if(value=='可用'){  
                return "<span style='color:green;font-weight:bold';>可用</span><img src='images/right.gif' />";  
            } else {  
                return "<span style='color:red;font-weight:bold';>禁用</span><img src='images/wrong.gif' />";  
            }  
        }} 
        */
      ];  
    //定义数据  
    var data = {$userList};  
    //转换原始数据为EXT可以显示的数据  
    var store = new Ext.data.ArrayStore({  
        data:data,  
        fields:[  
           {name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置  
           {name:'account'},  
           {name:'name'},  
           {name:'email'},
           {name:'last_time'},
           {name:'last_ip'},
           {name:'login_times'},
           {name:'status'},
        ]  
    });  
    //加载数据  
    var bbar = new Ext.PagingToolbar({  
        pageSize:10,//每页显示几条数据  
        store:store,//数据  
        displayInfo:true,//是否显示数据信息  
        displayMsg:'显示第{0}条到{1}条记录，一共{2}条',//只有displayInfo:true时才有效，用来显示有数据的提示信息。  
        emptyMsg:"没有记录",//没有数据显示的信息  
    });
    //表格控件默认使用RowModel，按住shift或者ctrl键单击鼠标就可以选择多行，如果希望只选择一行，可以使用singleSelect:true  
    //我发现我在写的时候，不用的情况下，我试了发现默认就是不可多选的  
    //var sm = new Ext.grid.RowModel({singleSelect:true});  
    //创建表格  
    var grid = new Ext.grid.GridPanel({  
        renderTo:'grid', //渲染位置  
		style:'margin:5px;',
        //selModel:sm,  
        store:store, //转换后的数据  
        columns:columns, //显示列  
        stripeRows:true, //斑马线效果  
        //enableColumnMove: false, //禁止拖放列  
        //enableColumnResize: false, //禁止改变列宽度  
        loadMask:true, //显示遮罩和提示功能,即加载Loading……  
        //forceFit:true, //自动填满表格  
        viewConfig:{  
            columnsText:'显示的列',  
            scrollOffset:22, //表格右侧为滚动条预留的宽度,默认为20  
            sortAscText:'正序',  
            sortDescText:'倒序',  
            forceFit:true //表格会自动延展每列的长度，使内容填满整个表格  
        },
        bbar:bbar
    }); 
    
    store.load();  
    
//});  
</script> 

</body>
</html>